<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .wrapper {
            padding: 30px;
            display: flex;
            justify-content: center;
        }

        details {
            width: 100%;
            max-width: 500px;
        }

        summary {
            background: #f2f2f2;
            cursor: pointer;
            padding: 15px;
        }

        p {
            padding: 15px;
            margin: 0;
            background: #f2f2f2;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <details>
        <summary>
            查看
        </summary>

        <p>
            使用details标签实现手风琴
        </p>
    </details>
</div>
</body>
</html>